<template>
  <div>
    <div class="right_detail">
      <p class="right_title">热门搜索</p>
      <div class="right_detail_div">
        <img src="../assets/图层 15(1).png" />
      </div>
      <div class="right_detail_ul">
        <ul class="right_ul">
          <li v-for="(item, index) in right_list" :key="index">
            <span class="right_ul_tisp"></span>
            <router-link to="" class="right_ul_li_link">{{
              item.title
            }}</router-link>
          </li>
          <div class="right_ul_more">
            <router-link to="Chengfruit" class="right_ul_link">
              查看更多
            </router-link>
          </div>
        </ul>
      </div>
    </div>
    <div class="right_opation">
      <div
        class="right_opation_div"
        v-for="(item, index) in opation"
        :key="index"
      >
        <div>
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      right_list: [
        { title: "凤眼果怎么吃？它的这些营养……" },
        { title: "凤眼果怎么吃？它的这些营养……" },
        { title: "凤眼果怎么吃？它的这些营养……" },
        { title: "凤眼果怎么吃？它的这些营养……" },
        { title: "凤眼果怎么吃？它的这些营养……" },
        { title: "凤眼果怎么吃？它的这些营养……" },
      ],
      opation: [
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
        { name: "玳瑁" },
      ],
    };
  },
};
</script>
<style scoped>
.right_detail {
  width: 361px;
  margin: 124px auto 0;
}
.right_title {
  font-size: 26px;
  color: #a40000;
  text-align: left;
  font-weight: bold;
  margin-top: 25px;
}
.right_detail_div {
  width: 316px;
  height: 221px;
  margin: 40px 0 0;
}
.right_ul_tisp {
  width: 18px;
  height: 18px;
  background-color: #a40000;
  border-radius: 9px;
  margin-right: 10px;
}
.right_ul_li_link {
  font-size: 18px;
  color: #666666;
}
.right_ul li {
  margin-top: 15px;
  display: flex;
  align-items: center;
  height: 30px;
}
.right_ul li a:hover {
  color: #9e290b;
  font-size: 20px;
  font-weight: 600;
}
.right_ul_more {
  background-color: #a40100;
  white-space: nowrap;
  border-radius: 25px;
  margin-left: 160px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  width: 114px;
  padding: 10px 0;
  margin-top: 20px;
}
.right_ul_link {
  color: white;
}
.link {
  color: #666666;
}
.right_opation {
  width: 392px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 102px;
}
.right_opation {
  box-sizing: border-box;
}
.right_opation_div {
  width: 120px;
  height: 61px;
  margin-bottom: 29px;
}
.right_opation_div div {
  width: 99px;
  line-height: 51px;
  text-align: center;
  transition: all 0.1s;
  margin: 5px 10.5px;
  background: url("../assets/321360735191026397.png") no-repeat;
  background-size: 100% 100%;
}
.right_opation_div div:hover {
  width: 120px;
  line-height: 61px;
  margin-left: -2px;
  margin-top: -2.5px;
}
</style>
